<template>
    <div class="css-demo06">
        <h1>利用动画延迟实现复杂动画</h1>
        <div class="box" :style="{ '--delay': -value + 's' }"></div>

        <div class="box2" :style="{ '--delay': -value + 's' }"></div>

        <h2>拖拽看看</h2>
        <input class="input" @input="onInput" type="range" v-model="value" min="0" max="10" step="0.01" />
    </div>
</template>

<script setup>
import { ref } from 'vue';
let value = ref(0);
</script>

<style lang="less" scoped>
.box {
    margin: 100px 0px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #333;
    box-shadow: 0px 0px 5px #888;
    animation: boxa 10s linear;
    animation-fill-mode: forwards; //设置 CSS 动画在执行之前和之后如何将样式应用于其目标。  forwards动画执行后停留在100%的css;默认动画结束结束后回复到元素的css
    animation-play-state: paused; //动画暂停,后总时长是10s;停止后默认 0%的位置;
    animation-delay: var(--delay); // 通过动态设置delay 延迟设置负数(相当于让动画执行了一点时间后暂停)动画的效果会变化;
    // 可以免去js的计算;
    // 也可以做其他复杂的效果
    // 原理就是如此;通过浏览器的计算;不需要自己js计算
}

@keyframes boxa {
    0% {
        transform: translateX(0px);
    }

    100% {
        transform: translateX(1000px);
    }
}

// 稍稍复杂一点点的
.box2 {
    margin: 100px 0px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: skyblue;
    box-shadow: 0px 0px 5px #888;
    animation: boxb 10s linear;
    animation-fill-mode: forwards; //设置 CSS 动画在执行之前和之后如何将样式应用于其目标。  forwards动画执行后停留在100%的css;默认动画结束结束后回复到元素的css
    animation-play-state: paused; //动画暂停,后总时长是10s;停止后默认 0%的位置;
    animation-delay: var(--delay); // 通过设置delay 延迟设置负数(相当于让动画执行了一点时间后暂停)动画的效果会变化;
    // 可以免去js的计算;
    // 也可以做其他复杂的效果
    // 原理就是如此;通过浏览器的计算;不需要自己js计算
}

@keyframes boxb {
    0% {
        transform: translateX(0px) scale(1);
        border-radius: 50%;
        background-color: skyblue;
    }

    50% {
        border-radius: 30%;
        transform: translateX(1200px) scale(.5);
        background-color: #333;
    }

    100% {
        border-radius: 10%;
        transform: translateX(500px) scale(2);
        background-color: cyan;
    }
}
.input{
    width: 300px;
}
</style>